<template>
  <div class="liu">
    <div class="liuxiang">
      <div><img src="../imgs/设计.png" alt="" class="img1" /><b>设计</b></div>
      <div><img src="../imgs/开发.png" alt="" class="img1" /><b>开发</b></div>
      <div><img src="../imgs/元宇宙.png" alt="" class="img1" /><b>元宇宙</b></div>
    </div>
    <div class="bei" ref="bei"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import * as echarts from "echarts";
import { getBiye } from "../request/index";
var ydata = ["天津", "重庆", "江苏", "广东", "浙江", "上海", "北京"];
var salvProValue = [1, 3, 4, 6, 8, 9, 11];
const option = reactive({
  grid: {
    left: "10%",
    right: "0%",
    bottom: "2%",
    top: "2%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: "{b}:{c}",
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: {
    type: "category",
    data: ydata,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  series: [
    {
      name: "value",
      type: "bar",
      zlevel: 1,
      showBackground: true,

      itemStyle: {
        normal: {
          barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
          color: "#00b8e7",
        },
      },
      label: {
        normal: {
          color: "#fff",
          show: true,
          position: ["-40px", "5px"],
          textStyle: {
            fontSize: 16,
          },
          formatter: "{b}",
        },
      },
      barWidth: 20,
      data: salvProValue,
    },
    {
      name: "21",
      type: "bar",
      barWidth: 20,
      barGap: "-100%",
      data: salvProValue,
      itemStyle: {
        normal: {
          color: "#0c1d5f",
        },
        emphasis: {
          color: "#0c1d5f",
        },
      },
      label: {
        normal: {
          color: "#fff",
          show: true,
          position: "right",
          distance: 4,
          textStyle: {
            fontSize: 16,
          },
          formatter: "{c}",
        },
      },
    },
  ],
});

const bei = ref();
let asd;
onMounted(() => {
  asd = echarts.init(bei.value);
  asd.setOption(option);
  getBiye().then((res) => {
    console.log(res);
  });
});
</script>

<style lang="scss">
.liu {
  width: 80%;
  height: 100%;
  background: url("../imgs/border1.png") no-repeat;
  background-size: 100% 100%;
  margin: 1% 8%;
  color: #fff;
}
.liuxiang {
  display: flex;
  div {
    width: 30%;
    height: 50px;
    text-align: center;
    background: #2c1d97;
    margin: 2% 3%;
    text-align: center;
    display: flex;
    .img1 {
      width: 30px;
      height: 30px;
      margin: 10px;
    }
    b {
      margin: 15px;
    }
  }
}
.bei {
  width: 90%;
  height: 85%;
  margin: 0 5%;
}
</style>
